/*
 * @Author: your name
 * @Date: 2021-12-16 15:53:42
 * @LastEditTime: 2021-12-16 17:44:56
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\sideMenu\SideMenu.tsx
 */
import React from 'react';
import styles from './SideMenu.module.css';
import { sideMenuList } from './mockup';
import {
  Menu
} from 'antd';
import { GifOutlined } from "@ant-design/icons";

export const SideMenu: React.FC = () => {
  return (
    <Menu mode="vertical" className={styles['side-menu']}>
      {sideMenuList.map((m, index) => (
        <Menu.SubMenu
          key={`side-menu-${index}`}
          title={
            <span><GifOutlined />{m.title}</span>
          }
        >
          {m.subMenu.map((sm, smindex) => {
            <Menu.SubMenu
              key={`sub-menu-${smindex}`}
              title={
                <span><GifOutlined />{sm.title}</span>
              }
            >
              {sm.subMenu.map((sms, smsindex) => (
                <Menu.Item
                  key={`sub-sub-menu-${smsindex}`}
                >
                  <span><GifOutlined />{sms}</span>
                </Menu.Item>
              ))}
            </Menu.SubMenu>
          })}
        </Menu.SubMenu>
      ))}
    </Menu>
  );
};
